<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>订单管理 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" th:href="@{/css/order-management.css}"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<th:block th:replace="~{/header.html}"></th:block>
<div class="container">
    <div class="order-filter">
        <form th:action="@{/supplier/order/list}" method="get" id="filterForm">
            <div class="filter-group">
                <label>订单状态:</label>
                <select name="status">
                    <option value="">全部</option>
                    <option value="PENDING" th:selected="${status == 'PENDING'}">待支付</option>
                    <option value="PAID" th:selected="${status == 'PAID'}">已支付</option>
                    <option value="SHIPPED" th:selected="${status == 'SHIPPED'}">已发货</option>
                    <option value="CANCELLED" th:selected="${status == 'CANCELLED'}">已取消</option>
                    <option value="COMPLETED" th:selected="${status == 'COMPLETED'}">已完成</option>
                </select>
            </div>
            <div class="filter-group">
                <label>订单编号:</label>
                <input type="text" name="orderNo" th:value="${orderNo}" placeholder="请输入订单编号">
            </div>
            <button type="submit" class="btn-filter">筛选</button>
            <button type="button" class="btn-reset" onclick="resetForm()">重置</button>
        </form>
    </div>
    <script>
        function resetForm() {
            // 重置表单
            document.getElementById('filterForm').reset();
            // 立即提交空表单以显示全部订单
            window.location.href = '/supplier/order/list';
        }
    </script>
    <div class="order-list">
        <table class="order-table">
            <thead>
            <tr>
                <th>订单ID</th>
                <th>订单编号</th>
                <th>买家ID</th>
                <th>总金额</th>
                <th>状态</th>
                <th>支付时间</th>
                <th>收货人</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="order : ${orders}">
                <td th:text="${order.id}"></td>
                <td th:text="${order.orderNo}"></td>
                <td th:text="${order.buyerId}"></td>
                <td th:text="'￥' + ${#numbers.formatDecimal(order.totalAmount, 1, 2)}"></td>
                <td>
                    <span th:switch="${order.status}">
                        <span th:case="'PENDING'">待支付</span>
                        <span th:case="'PAID'">已支付</span>
                        <span th:case="'SHIPPED'">已发货</span>
                        <span th:case="'COMPLETED'">已完成</span>
                        <span th:case="'CANCELLED'">已取消</span>
                        <span th:case="*" th:text="${order.status}">未知状态</span>
                    </span>
                </td>
                <td th:text="${order.paymentTime != null}? ${#dates.format(order.paymentTime, 'yyyy-MM-dd HH:mm')} : '--'"></td>
                <td th:text="${order.contactName}"></td>
                <td th:text="${order.contactPhone}"></td>
                <td>
                    <a th:href="@{'/supplier/order/detail/' + ${order.orderNo}}" class="btn-detail">详情</a>
                    <form th:action="@{/supplier/order/delete/{orderNo}(orderNo=${order.orderNo})}"
                          method="post" style="display:inline;"
                          onsubmit="return confirm('确认删除该订单吗？')">
                        <button type="submit" class="text-red-600 hover:underline ml-2">删除</button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="no-order" th:if="${orders.isEmpty()}">
            <p>暂无订单</p>
        </div>
    </div>
    <div class="pagination" th:if="${pageInfo.total > 0}">
        <ul>
            <li th:classappend="${!pageInfo.hasPreviousPage}? 'disabled'">
                <a th:if="${pageInfo.hasPreviousPage}"
                   th:href="@{/supplier/order/list(pageNum=${pageInfo.prePage}, status=${status}, orderNo=${orderNo})}">上一页</a>
                <span th:unless="${pageInfo.hasPreviousPage}">上一页</span>
            </li>
            <li th:each="i : ${#numbers.sequence(1, pageInfo.pages)}"
                th:classappend="${i == pageInfo.pageNum}? 'active'">
                <a th:href="@{/supplier/order/list(pageNum=${i}, status=${status}, orderNo=${orderNo})}"
                   th:text="${i}"></a>
            </li>
            <li th:classappend="${!pageInfo.hasNextPage}? 'disabled'">
                <a th:if="${pageInfo.hasNextPage}"
                   th:href="@{/supplier/order/list(pageNum=${pageInfo.nextPage}, status=${status}, orderNo=${orderNo})}">下一页</a>
                <span th:unless="${pageInfo.hasNextPage}">下一页</span>
            </li>
        </ul>
    </div>
</div>
<th:block th:replace="~{/footer.html}"></th:block>
<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>